import React, { useState } from 'react';
import { Container, Row, Col, Tabs, Tab } from 'react-bootstrap';
import BacktestTab from './components/BacktestTab';
import ReportsTab from './components/ReportsTab';

function App() {
  const [key, setKey] = useState('backtest');
  const [refreshReports, setRefreshReports] = useState(false);

  // 处理选项卡切换
  const handleTabSelect = (k) => {
    setKey(k);
    
    // 当切换到历史报告选项卡时，触发刷新
    if (k === 'reports') {
      setRefreshReports(prev => !prev); // 切换状态触发刷新
    }
  };

  return (
    <Container fluid>
      <Row>
        <Col xs={12}>
          <h1 className="text-center mb-4 mt-4">债券回测系统</h1>
        </Col>
      </Row>
      
      <Tabs
        id="main-tabs"
        activeKey={key}
        onSelect={handleTabSelect}
        className="mb-3"
      >
        <Tab eventKey="backtest" title="回测设置">
          <BacktestTab />
        </Tab>
        <Tab eventKey="reports" title="历史回测报告">
          <ReportsTab refreshTrigger={refreshReports} />
        </Tab>
      </Tabs>
    </Container>
  );
}

export default App;
